*, *::before, *::after {
box-sizing: border-box;
}

* {
margin: 0;
}

body {
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}

img, picture, video, canvas, svg {
display: block;
max-width: 100%;
}

input, button, textarea, select {
font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
overflow-wrap: break-word;
}

body {
font-family: Arial, sans-serif;
padding: 30px;
margin: 0;
background-color: #1b2a4b;
color: #f0f0f0;
}

select, input[type = "text"] {
padding: 10px;
margin: 10px 0;
width: 100%;
max-width: 400px;
box-sizing: border-box;
border: 1px solid #ff003c;
border-radius: 8px;
font-size: 1em;
background-color: #2d416f;
color: #f0f0f0;
transition: border 0.2s ease, box-shadow 0.2s ease;
}

select:focus, input[type = "text"]:focus {
outline: none;
border-color: #ff003c;
box-shadow: 0 0 5px rgba(255, 0, 60, 0.6);
}

button {
background-color: #ff003c;
color: white;
padding: 12px 20px;
border: none;
border-radius: 25px;
font-size: 1em;
cursor: pointer;
transition: background-color 0.3s ease-in-out;
margin-top: 10px;
box-shadow: 0 4px 8px rgba(255, 0, 60, 0.3);
text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
}

button:hover {
background-color: #ff3366;
}

#output, #explain {
background-color: #263a60;
border: 1px solid #333;
padding: 15px;
margin-top: 20px;
border-radius: 8px;
max-width: 800px;
word-wrap: break-word;
white-space: pre-wrap;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
color: #f0f0f0;
animation: fadeIn 0.4s ease-in;
}

#output:empty, #explain:empty, #salty:empty {
display: none;
}

#divforsalt {
margin-top: 10px;
}

.GETMEOUTOFHERE {
display: flex;
align-items: center;
gap: 390px;
position: fixed;
width: 100%;
background: rgba(1, 1, 123, 0.9);
padding: 0 20px;
box-shadow: 0 2px 6px rgba(0,0,0,0.2);
top: 0;
left: 0;
}

.GETMEOUTOFHERE a {
padding: 10px 20px;
background-color: #ff003c;
color: white;
text-decoration: none;
border-radius: 25px;
font-weight: bold;
transition: 0.3s ease;
text-align: center;
text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
box-shadow: 0 0 8px rgba(255, 0, 60, 0.4);
}

.GETMEOUTOFHERE a:hover {
background-color: #ff3366;
transform: scale(1.1);
}

.imgtest img {
height: 100px;
margin-right: 10px;
padding-left: 50px;
width: auto;
filter: brightness(1) contrast(1.1);
}

@keyframes fadeIn {

from {
opacity: 0;
transform: translateY(10px);
}

to {
opacity: 1;
transform: translateY(0);
}
}